<script setup lang="ts">
import {computed} from 'vue'

const {col = 1, gutter = 15} = defineProps<{
  col?: 1 | 2 | 3 | 4 | 6 | 8
  gutter?: number
}>()

const span = computed(() => {
  if (col === 2) {
    return {xl: 12, lg: 12, md: 24, sm: 24, xs: 24}
  } else if (col === 3) {
    return {xl: 8, lg: 8, md: 24, sm: 24, xs: 24}
  } else if (col === 4) {
    return {xl: 6, lg: 6, md: 12, sm: 12, xs: 24}
  } else if (col === 6) {
    return {xl: 4, lg: 8, md: 8, sm: 12, xs: 24}
  } else {
    return {xl: 24, lg: 24, md: 24, sm: 24, xs: 24}
  }
})
</script>
<template>
  <el-row :gutter>
    <slot name="default" :span="span"></slot>
  </el-row>
</template>